<template>
	<view class="tui-centers">
		<!--头部-->
		<view class="tui-flex text-area">
			<view class="tui-flex tui-rolling-search" @tap="navTo('/pagesA/search/search')">
				<view><uniIcons type="search" size="40" color="#999"></uniIcons></view>
				<view class="tui-hot-item">搜索</view>
			</view>
			<view class="tui-notice-bars">
				<uni-notice-bar
					@tap="navTo('/pagesA/notice/notice')"
					showIcon="true"
					color="#333"
					background-color="#FDFAF1"
					scrollable="true"
					:speed="40"
					single="true"
					:text="noticeTex"
				></uni-notice-bar>
			</view>
		</view>
		<!--轮播图 autoplay -->
		<ls-swiper :list="imgList" imgKey="image" autoplay :loop="true"
		           dots boxWidth="100%" imgWidth="96%" :previousMargin="28"
		           :nextMargin='0' :height="230" :imgRadius="5" @clickItem="clickShuffl"/>

		<!--导航栏-->
		<uni-menu :detail="contentList" :menu="style" :imgW="100" @routerTo="clickRouter"></uni-menu>

		<tui-head-title v-if="themeData.length != 0" title="游玩攻略" url="/pagesA/ticket/ticket?id=0"></tui-head-title>
		<view class="tui-mg-bottom">
			<ls-swiper :list="themeData" imgKey="image" conterTxt
			           boxWidth="100%" imgWidth="97%" :previousMargin="30"
			           :nextMargin='14' :height="190" :imgRadius="5"
			           @clickItem="clickItem"/>
		</view>

		<block v-for="(item, index) in treeList" :key="index">
			<tui-head-title :title="item.name" :image="item.icon"></tui-head-title>
			<uni-sale v-if="item.name == '热门售卖'" :list="item.categoryChildren"></uni-sale>
			<uni-recommend v-else :list="item.categoryChildren"></uni-recommend>
		</block>

		<!-- 登录提示 -->
		<!--<uni-login-model></uni-login-model>-->
		<!--紧急弹窗-->
		<uni-float-btn></uni-float-btn>
		
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import lsSwiper from '@/components/ls-swiper/index.vue'
	import uniMenu from '@/components/uni-menu/uni-menu.vue'
	import tuiHeadTitle from './components/tui-head-title.vue'
	import uniGongge from './components/uni-gongge.vue'
	import uniSale from './components/uni-sale.vue'
	import uniRecommend from './components/uni-recommend.vue'
	import uniFloatBtn from '@/components/uni-float-btn/uni-float-btn.vue'
	import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'
	
	export default {
		name: 'index',
		components: {
			uniIcons,
			uniNoticeBar,
			lsSwiper,
			uniMenu,
			tuiHeadTitle,
			uniGongge,
			uniSale,
			uniRecommend,
            uniFloatBtn,
            uniLoginModel
		},
		data() {
			return {
				imgList: [],
				contentList: [],
                themeData: [],
                treeList: [],
				style: 4,
				dateForm: {
					pageNum: 1,
					pageSize: 3,
                    position: 0
				},
				noticeTex: ''
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			async getList() {
                this.$api.api('home', this.dateForm).then(res => {
                    this.imgList = res.data.list
                }).catch(error => {
                });
                this.$api.api('category.topic').then(res => {
                    if (res.code == 200) {this.themeData = res.data} else {this.$api.msg(res.message)
					}
                }).catch(error => {
                    this.$api.msg(error.message)
                });
                this.$api.api('category.tree', { isHot: 0 }).then(res => {
                    if (res.code == 200) {this.contentList = res.data} else {this.$api.msg(res.message)}
                }).catch(error => {
                    this.$api.msg(error.message)
                });
                this.$api.api('category.tree', { isHot: 1 }).then(res => {
                    if (res.code == 200) {this.treeList = res.data} else {this.$api.msg(res.message)}
                }).catch(error => {
                    this.$api.msg(error.message)
                });
                var list = []
                this.$api.api('notice').then(res => {
                    if (res.code == 200 ) {
                        res.data.list.map((item, index) => {
                            list.push(index + 1 + '.' + item.title)
                        })
                        this.noticeTex = list.join(".")
                    } else {
                        this.$api.msg(res.message)
                    }
                }).catch(error => {
                    this.$api.msg(error.message)
                })
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
            clickItem(item) {
                uni.navigateTo({
                    url: '/pages/index/components/details?content=' + item.content
                    // url: `/pagesA/ticket/components/ticketDetail?id=${item.id}`
                })
            },
			clickShuffl(item) {
				uni.navigateTo({
					url: '/pagesA/ticket/components/ticketDetail?id=' + item.productId
				})
			},
            clickRouter(item) {
                if (item.name == '停车') {
                    uni.navigateTo({
                        url: '/pagesA/parking/parking'
                    })
                } else if(item.name == '租赁') {
                    uni.navigateTo({
                        url: `/pagesA/coupons/leaseItem?id=${item.id}`
                    })
                } else if(item.name == '优惠') {
                    uni.navigateTo({
                        url: `/pagesA/emergency/exchange`
                    })
				} else {
                    uni.navigateTo({
                        url: `/pagesA/ticket/ticket?id=${ item.id }&name=${item.name}`
                    })
				}
            }
		}
	}
</script>

<style lang="scss" scoped>
	.tui-centers {
		padding-bottom: 96rpx;
		font-size: 28rpx;
		line-height: 1.8;
	}
	.text-area {
		padding: 20rpx 30rpx;
		.tui-rolling-search {
			width: 25%;
			background-color: #eee;
			border-radius: $uni-border-radius-sm;
			color: $font-color-dark;
			padding-left: 10rpx;
			.tui-hot-item {
				padding-left: 15rpx;
				color: $uni-text-color-grey;
			}
		}
		.tui-notice-bars {
			flex: 1;
			padding-left: $uni-spacing-row-lg;
			border-radius: $uni-border-radius-sm;
			.uni-noticebar {
				margin-bottom: 0;
				border-radius: $uni-border-radius-sm;
			}
		}
	}
	.tui-center-boxfilled {
		padding: 20rpx 30rpx;
		color: $uni-text-color-inverse;
		.tui-center-flex {
			flex: 1;
			height: 210rpx;
			.tui-center-title {
				font-size: 50rpx;
				padding: 35rpx 15rpx 0;
			}
			.tui-center-txt {
				font-size: 26rpx;
			}
		}
		.flex1 {
			/*background-color: rgb(207,219,0);*/
			background: rgb(98,220,173);
			border-radius: $uni-border-radius-lg;
			margin-right: 30rpx;
		}
		.flex2 {
			/*background-color: rgb(120,149,46);*/
			background: rgb(23,181,100);
			border-radius: $uni-border-radius-lg;
		}
	}
	.tui-mg-bottom {
		margin-bottom: 90rpx;
	}
</style>
